<template>
  <div>
    <el-input v-model="input" placeholder="请输入内容"></el-input>
        <span>
          <el-button type="danger"  @click="search">点击搜索按钮</el-button>
          <el-button type="text" @click="add">点击添加餐品</el-button>
        </span>
 <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="foodname"
          label="菜品名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="synopsis"
          label="菜品简介"
          width="180">
        </el-table-column>
        <el-table-column
          prop="菜品详情"
          label=" detailinfo">
        </el-table-column>
        <el-table-column
           prop="price"
           label="菜品价格">
        </el-table-column>
        <el-table-column
          prop="coverphoto"
          label="菜品图片">
          <template slot-scope="props">
            <div class="demo-image__placeholder">
              <div class="block">
                <el-image :src="props.row.coverphoto"></el-image>
              </div>
            </div>
          </template>

        </el-table-column>
        <el-table-column
             prop="state"
             label="菜品状态">
        </el-table-column>
        <el-table-column
             prop="sortnum"
             label="菜品序列号">
        </el-table-column>
        <el-table-column label="操作1">
          <template slot-scope="scope">
            <el-row>
               <el-button type="primary" @click="update(scope.row)"  size="small">修改按钮</el-button>
            </el-row>
          </template>
        </el-table-column>
   <el-table-column label="操作2">
     <template slot-scope="scope">
       <el-row>
         <el-button type="primary" @click="remove(scope.row)"  size="small">删除按钮</el-button>
       </el-row>
     </template>
   </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-size="this.pageSize"
                    layout="total, prev, pager, next"
                    :total="this.total">
                  </el-pagination>
      </div>
      <el-dialog
            title="菜品信息"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
              <el-form :model="form">
                <el-form-item label="菜品名称" >
                  <el-input v-model="form.foodname" autocomplete="off"  :disabled="this.add5"></el-input>
                </el-form-item>
                <el-form-item label="菜品简介" >
                   <el-input v-model="form.synopsis" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="菜品详情" >
                   <el-input v-model="form.detailinfo" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="菜品价格" >
                   <el-input v-model="form.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="菜品图">
                  <el-upload
                          ref="avatar-uploader"
                          class="avatar-uploader"
                          :show-file-list="false"
                          :auto-upload="false"
                          action
                          :on-change="handleChange"
                        >
                          <img v-if="AddSubmenuData.imageUrl" :src="AddSubmenuData.imageUrl" class="avatar">
                          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                </el-form-item>
                <el-form-item label="菜品状态" >
                   <el-input v-model="form.state" autocomplete="off"></el-input>
                  </el-form-item>
                <el-form-item label="菜品序列号" >
                   <el-input v-model="form.seqnum" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="菜品类别" >
                    <template>
                      <el-select v-model="value" placeholder="请选择">
                        <el-option
                          v-for="item in products"
                          :key="item.id"
                          :label="item.productsname"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </template>
                </el-form-item>
              </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="submit">确 定</el-button>
            </span>
          </el-dialog>
  </div>
</template>

<script>
export default {
name: "FoodManage",
 data() {
      return {
        add5:true,
        currentPage:1,
        currentPage2:1,
        pageSize:10,
        total:1000,
        fileList:[],
        flag:0,
        flag2:0,
        dialogImageUrl: '',
        dialogVisibleimage: false,
        src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
        foodName:'',
        form:{
             foodname:"",
             synopsis:"",
             detailinfo:"",
             price:0,
             coverphoto:"",
             state:0,
             seqnum:0,
        },
        AddSubmenuData:{
                  id:"",
                  pid:"",
                  funType:1,
                  name:"",
                  sort:"",
                  SystemCoding:"",
                  remarks:"",
                  imageUrl: ''
                },
        products:[],
        dialogVisible: false,
        input: '',
        value:'',
        tableData: [
          {
            foodname:"菜品姓名",
            synopsis:"简介",
            detailinfo:"详细信息",
            price:36,
            coverphoto:"图片地址",
            state:1,
            seqnum:23445,
          }
        ],
      }
    },
 methods:{
        handleSizeChange(val) {
         console.log(`每页 ${val} 条`);
         },
         handleCurrentChange(val) {
           console.log(`当前页: ${val}`);
           this.currentPage = val;
           this.currentPage2 = val
           if(this.flag==0){
               this.initFoodData()
          }else{
                this.search()
           }
        },
     handleChange(file, fileList) {
       let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name);
       if (existFile) {
         this.$message.error('当前文件已经存在!');
         fileList.pop();
       }
       this.fileList = fileList;
     },
        init_Products(){
          this.$http.get("/productsInfo/allProducts").then(resp=>{
              this.products=resp.data.data
          })
        },
        remove(row){
          let tempFileList = []
          for (var index = 0; index < this.fileList.length; index++) {
            if (this.fileList[index].name !== file.name) {
              tempFileList.push(this.fileList[index])
            }
          }
          this.fileList = tempFileList
          this.$http.post("/foodVariety/deleteFoodVariety/"+row.foodname).then(resp=>{
            if(resp.data.code==200){
                alert("商品下架成功!")
            }
          })

        },

        submit(){
          let formData = new FormData()
          this.fileList.forEach(item => {
            formData.append('file', item.raw)
          })
         this.foodName = this.form.foodname
          console.log(this.foodName)
          console.log(this.value)
          formData.append("foodName",this.foodName)

          console.log(this.value)
          this.dialogVisible=false;
          if(this.flag2==0){
            console.log("=======添加")
            this.$http.post('/foodVariety/food/0',formData).then((resp) => {
              if (resp.data.code === 200) {
                // 消息提示
                this.$message({
                  message: '文件上传成功',
                  type: 'success',
                  duration: 1500
                })
              }
            })

            console.log(this.form)
            this.form. coverphoto=this.dialogImageUrl
            this.$http.post("/foodVariety/addFoodVariety/"+this.value,this.form).then(resp=>{
               if(resp.data.code==200){
                  alert("添加成功!")
                 this.initFoodData()
               }else{
                 alert("添加失败")
              }
            })
          }else{
            this.$http.post('/foodVariety/food/1',formData).then((resp) => {
              if (resp.data.code === 200) {
                // 消息提示
                this.$message({
                  message: '文件上传成功',
                  type: 'success',
                  duration: 1500
                })
              }
            })
            console.log("============更新")
            console.log(this.form)
            this.form. coverphoto=this.dialogImageUrl
            this.$http.post("/foodVariety/addFoodVariety/"+this.value,this.form).then(resp=>{
                      if(resp.data.code==200){
                        alert("更新成功!")
                        this.initFoodData()
                      }else{
                        alert("更新失败")
                    }
             })
          }
      },
      add(){
          this.add5=false
        this.flag2=0
        this.dialogImageUrl=""
        this.form.foodname=""
        this.form.synopsis=""
        this.form.detailinfo=""
        this.form.price=36
        this.form.coverphoto=""
        this.form.state=0
        this.form.seqnum=0
        this.dialogVisible=true
      },
      search(){
          console.log("默认查询")
          console.log(this.currentPage)
          this.flag=1
          this.$http.get("/foodVariety/selectByLike/"+this.input+"/"+this.currentPage2+"/"+this.pageSize).then(resp=>{
            console.log(resp)
            if(resp.data.code==200){
              alert("查询成功!")
              console.log(resp.data)
              this.tableData=resp.data.data.records
              this.total=resp.data.data.total
              this.currentPage=resp.data.data.current
            }else{
              alert("查询失败")
            }
          })
      },
      update(row){
        this.add5=true
        console.log(row)
        this.foodName = row.foodname
        this.dialogImageUrl=row.coverphoto
        this.flag2=1
        this.form=row
        this.dialogVisible=true
      },
       handleClose(done) {
              this.$confirm('确认关闭？')
                .then(_ => {
                  done();
                })
                .catch(_ => {});
         },
       initFoodData(){
          this.$http.get("/foodVariety/selectFoodAll/"+this.currentPage+"/"+this.pageSize).then(resp=>{
            console.log(resp.data)
            if(resp.data.code==200){
              this.tableData=resp.data.data.records
              this.total=resp.data.data.total
              this.currentPage=resp.data.data.current
            }
          })
       }

   },
   created() {
        this.init_Products()
        this.initFoodData()
   }
}

</script>

<style scoped>
.el-input{
  width: 45%
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }



</style>
